<template>
  <!-- <view class="container">
    <view class="title">注册!</view>
    <form>
      <view class="Spa">手机号注册</view>
      

      <view class="input-group">
        <uni-icons type="person" size="20" color="#666"></uni-icons>
        <input class="input-field" type="text" v-model="data.form.username" placeholder="请输入账号"
          placeholder-class="placeholder" />
      </view>

      <input type="text" placeholder="请输入密码" v-model="data.form.password" />
      <view class="yzmBox">
        <input type="text" placeholder="请输入验证码" v-model="data.CapCode">
        <view class="imgBox" @tap="reCreate">
          <img class="code" :src="data.codeUrl" alt="网络缓慢" @click="getCode">
        </view>
      </view>
      <button @tap="finshReg">注册</button>
      <view class="txt">
        <text>注册成功，</text>
        <text @tap="goLogin" style="color: rgb(13, 77, 214);">返回登录</text>
      </view>
    </form>
    <up-toast ref="uToastRef"></up-toast>
  </view> -->

  <view class="login-container">
    <view class="login-header">
      <image class="login-logo" :src="logoUrl" mode="aspectFit" />
      <text class="login-title">高考查分助手</text>
    </view>

    <view class="login-form">
      <view class="input-group">
        <uni-icons type="person" size="20" color="#666"></uni-icons>
        <input class="input-field" type="text" v-model="data.form.username" placeholder="请输入账号"
          placeholder-class="placeholder" />
      </view>

      <view class="input-group">
        <uni-icons type="locked" size="20" color="#666"></uni-icons>
        <input class="input-field" :type="showPassword ? 'text' : 'password'" v-model="data.form.password"
          placeholder="请输入密码" placeholder-class="placeholder" />
        <view>
          <view class="password-toggle" @click="togglePasswordVisibility">
            <uni-icons :type="showPassword ? 'eye' : 'eye-slash'" size="20" color="#666"></uni-icons>
          </view>
        </view>
      </view>

      <view class="input-group input-code">
        <view class="ipt">
          <input class="input-field" type="text" v-model="data.CapCode" placeholder="请输入验证码"
            placeholder-class="placeholder" />
        </view>
        <view class="imgBox" @tap="reCreate">
          <img class="code" :src="data.codeUrl" alt="网络缓慢" @click="getCode">
        </view>
      </view>

      <button class="login-button" @click="finshReg">登录</button>

      <view class="helper-links">

        <text class="helper-text" @click="goLogin">返回登录</text>
      </view>
    </view>


    <u-toast ref="uToastRef"></u-toast>
  </view>
</template>

<script lang="ts" setup>

import { reqCheckCode, reqGetCode, reqUserReg } from "@/api/user"
// import { reqCaptcha, reqValidateCode } from '@/api/tools'
import { ref, reactive, onMounted } from 'vue';
const logoUrl = 'https://ai-public.mastergo.com/ai/img_res/e84b3bc148fdec5c569dff07b3837f5b.jpg';
const form = ref()
const data = reactive({
  CapCode: '',
  codeUrl: '',
  form: {
    username: '',
    password: '',
  }
})
const showPassword = ref(false);
const uToastRef = ref()

onMounted(() => {
  getCode()
})

// 获取验证码
const getCode = async () => {
  let res = await reqGetCode()
  data.codeUrl = res.data
}
// 验证验证码
const checkForm = async () => {
  // console.log(uToastRef)
  const cookie = uni.getStorageSync('codeText');
  console.log(cookie);
  const query = {
    code: data.CapCode,
  }
  if (data.form.password === '' || data.form.password == '') {
    uToastRef.value && uToastRef.value.show({
      type: 'error',
      message: "请输入密码",
      position: 'top',
      duration: 1000,
      iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/error.png'
    })
    return false
  }
  let res = await reqCheckCode(query)
  if (res.code == 200) {
    return true
  } else {
    uToastRef.value && uToastRef.value.show({
      type: 'error',
      message: "验证码错误",
      position: 'top',
      duration: 1000,
      iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/error.png'
    })
    reCreate()
    return false
  }
}

const togglePasswordVisibility = () => {
  showPassword.value = !showPassword.value;
};
// 重新获取验证码
const reCreate = async () => {
  let res = await reqGetCode()
  data.codeUrl = res.data + "?" + Math.random()
}

// 提交
const finshReg = async () => {
  let submit = await checkForm()
  if (submit) {
    const query = {
      username: data.form.username,
      password: data.form.password
    }
    let res = await reqUserReg(query)
    if (res.code == 200) {
      uToastRef.value && uToastRef.value.show({
        message: '注册成功',
        type: 'success',
        position: 'top',
        duration: 1000,
        iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/success.png'
      })
      setTimeout(() => {
        goLogin()
      }, 1000)
    } else {
      uToastRef.value && uToastRef.value.show({
        message: res.msg,
        type: 'error',
        position: 'top',
        duration: 1000,
        iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/error.png'
      })
      resetIpt()
    }
  } else {
    return
  }
}

const goLogin = () => {
  uni.redirectTo({
    url: '/pages/login/index'
  })
}

const resetIpt = () => {
  data.form.password = ""
  data.form.username = ""
  form.value && form.value.resetFields()
}
</script>

<style scoped lang="scss">
.login-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0 60rpx;
  background-color: #ffffff;
}

.login-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 80rpx;
}

.login-logo {
  width: 200rpx;
  height: 200rpx;
  margin-bottom: 20rpx;
}

.login-title {
  font-size: 32px;
  color: #333333;
  font-weight: bold;
}

.login-form {
  width: 100%;
}

.input-group {
  display: flex;
  align-items: center;
  height: 100rpx;
  padding: 0 30rpx;
  margin-bottom: 30rpx;
  background-color: #f5f5f5;
  border-radius: 50rpx;
}

.input-field {
  flex: 1;
  height: 100rpx;
  margin-left: 20rpx;
  font-size: 14px;
  color: #333333;
}

.placeholder {
  color: #999999;
  font-size: 14px;
}

.password-toggle {
  padding: 20rpx;
}

.login-button {
  width: 100%;
  height: 100rpx;
  margin-top: 60rpx;
  background-color: #4a90e2;
  color: #ffffff;
  font-size: 16px;
  border-radius: 50rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.helper-links {
  display: flex;
  justify-content: space-between;
  margin-top: 40rpx;
  padding: 0 20rpx;
}

.helper-text {
  color: #666666;
  font-size: 14px;
  text-align: center;
}

.input-code {
  display: flex;
  align-items: center;
  justify-content: space-between;

  .ipt {
    width: 45%;

    .input-field {}
  }

  .imgBox {
    width: 45%;
    height: 100rpx;

    img {
      width: 100%;
      height: 100%;
    }
  }
}
</style>  